// 入口文件
// 导入vue
import Vue from 'vue'
// 导入vuex 
import Vuex from 'vuex'
// 注册到Vue中
Vue.use(Vuex)

// 获取本地存储的数据
var car = JSON.parse(localStorage.getItem('car') || '[]');

// new Vuex.Store()实例，得到一个数据仓储对象
var store = new Vuex.Store({
    state:{ // this.$store.state.**
        // 可以当做组件中的data；存储数据的
        car: car, //将购物车中的商品的数据，用数组存起来，在car数组中存储一些商品的对象，{ id: 商品ID, count：购买的数量, price：商品的单价, selected: true|false }
    },
    mutations:{ // this.$store.commit('方法名','按需传值')
        // 可以当做组件中的methods；
        addToCar(state, goodsinfo){
            // 点击购物车，将商品信息保存到state中的car数组里
            // 分析问题：
            // 1.如果购物车中，之前已经有这个对应的商品，那么只需更新数量
            // 2.如果没有，则直接把商品数据push到car中即可
            var flag = false;  //在car没有找到对应的商品
            // 通过some找car中是否有该商品，若有直接更新数量
            state.car.some(item=>{
                if(item.id == goodsinfo.id){
                    item.count += parseInt(goodsinfo.count);
                    flag = true; //找到商品，将标识符设为true
                    return true;
                }
            })
            // car里面没找到商品数据，直接添加该商品数据
            if(!flag){ //标识符为false，没找到商品，执行if语句：car添加商品信息
                state.car.push(goodsinfo);
            }

            // 当更新car之后，把car存储到本地的localstorage中
            localStorage.setItem('car', JSON.stringify(state.car));
        },
        updateGoodsInfo(state,goodsinfo){
            // 修改商品数量
            state.car.some(item=>{
                if(item.id == goodsinfo.id){
                    item.count = parseInt(goodsinfo.count);
                    return true;
                }
            })
            // 当修改完商品数量，更新localstorage
            localStorage.setItem('car', JSON.stringify(state.car));
        },
        deleteGoodsInfo(state,goodsId){
            state.car.some((item, index)=>{
                if(item.id == goodsId){
                    state.car.splice(index, 1);
                    return true;
                }
            })
            // 当删除car商品之后，把car更新到本地的localstorage中
            localStorage.setItem('car', JSON.stringify(state.car));
        },
        touchSwitch(state,goodsId){
            state.car.some(item=>{
                if(item.id == goodsId){
                    item.selected = !item.selected;
                    return true;
                }
            })
            // 当更改car商品开关之后，把car更新到本地的localstorage中
            localStorage.setItem('car', JSON.stringify(state.car));
        }
    },
    getters:{ // this.$store.getters.***
        forEachCount(state){
            var counts = 0;
            var prices = 0;
            state.car.forEach(item=>{
                if(item.selected == true){
                    counts += item.count;
                    prices += item.price*item.count;
                }
            })
            return {counts: counts, prices: prices.toFixed(2)};
        },
    }
});

// 导入vue-router
import VueRouter from 'vue-router'
// 安装路由模块
Vue.use(VueRouter)

// 导入mint-ui
// import MintUi from 'mint-ui'
import 'mint-ui/lib/style.css'

// 将MintUi注册到Vue全局组件中
// Vue.use(MintUi)

// 导入App.vue组件
import App from './App.vue'

// 导入vue-resource
import VueResource from 'vue-resource'
Vue.use(VueResource)
// 导入vue-preview 缩略图 插件
import VuePreview from 'vue-preview'
Vue.use(VuePreview)

// 导入MUI的css                                                                                                                                                                                                                                                                                                                                                                           
import './lib/mui-master/dist/css/mui.min.css'
import './lib/mui-master/examples/hello-mui/css/icons-extra.css'
// MintUi   Header,Swipe, SwipeItem组件
import { Header, Swipe, SwipeItem, Button, Lazyload } from 'mint-ui';
Vue.component(Header.name, Header);
Vue.component(Swipe.name, Swipe);
Vue.component(SwipeItem.name, SwipeItem);
Vue.component(Button.name, Button);
Vue.use(Lazyload);

// 导入自己的router路由模块
import router from './router.js'
//导入时间格式化插件
import moment from 'moment'
//定义全局过滤器
Vue.filter('dataFormat', function(dataStr, pattern = "YYYY-MM-DD HH:mm:ss"){
    return moment(dataStr).format(pattern);
})

var vm = new Vue({
    el:'#app',
    data:{

    },
    methods:{

    },
    router:router,
    render:function(c){
        return c(App);
    },
    // 挂在store仓储对象
    store:store
})
